<template>
  <div class="drop">
    <div class="drop-box">
      <div class="title" @click="titleClickHandle">
        <span style="margin-right: 0.5rem;">{{selectValueLabel}}</span>
        <van-icon name="arrow-up" v-if="valueIsShow" />
        <van-icon name="arrow-down" v-else />
      </div>
      <div class="container" v-show="valueIsShow">
        <div class="item" :style="{color: item.value === selectValue ? '#456bfb' : '#000000'}" v-for="item in valueList" :key="item.value" @click="valueItemClick(item)">{{item.label}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, toRefs } from "vue"
export default {
  name: "Drop",
  props: {
    valueList: {
      type: Object,
      required: true,
    }
  },  
  emits: ["valueItemClick"],
  setup(props, context) {
    let valueIsShow = ref(false)

    const { valueList } = toRefs(props)
    
    let selectValue = ref(0)
    let selectValueLabel = ref(valueList.value[0].label)

    function titleClickHandle() {
      valueIsShow.value = !valueIsShow.value
    }

    function valueItemClick(item) {
      selectValue.value = item.value
      selectValueLabel.value = item.label
      valueIsShow.value = !valueIsShow.value
      context.emit("valueItemClick", item.value, item.label)
    }

    return {
      valueIsShow,
      selectValue,
      selectValueLabel,
      titleClickHandle,
      valueItemClick
    }
  }
}
</script>

<style lang="scss">
.drop {
  min-width: 8rem;
  height: 2.5rem;

  &-box {
    position: relative;
    .title {
      position: absolute;
      left: 0;
      top: 0;
      height: 2.5rem;
      width: 100%;
      text-align: center;
      line-height: 2.5rem;
      color: var(--gray-color2);
      
    }
    .container {
      position: absolute;
      left: 0;
      top: 3rem;
      width: 100%;
      min-height: 3rem;
      background-color: #FFFFFF;
      display: flex;
      flex-direction: column;
      z-index: 9;
      box-sizing: border-box;
      padding: 0 1rem;
      box-shadow: 1px 1px 5px #ccc;
      border-radius: var(--global-border-radius);
      

      .item {
        text-align: center;
        width: 100%;
        height: 3rem;
        line-height: 3rem;
        border-bottom: 0.1rem solid var(--gray-color3);

        &:last-child {
          margin: 0;
          border-bottom: none;
        }
      }
    }
  }
}
</style>